// 导入React
import React from "react";

// JSX练习
function App() {
  // 渲染条件
  const isLogin = true;
  // 条件判断函数
  const loadData = () => {
    if (isLogin) {
      // 登录成功数据
      const books = [
        { id: 1, name: "React由浅入深" },
        { id: 2, name: "Vue由浅入深" },
      ];
      return (
        <div>
          {books.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
          <hr />
          {books.map(
            //   item => (
            //   <li key={item.id}>{item.name}</li>
            // )
            // 上面的写法和下面的写法等价
            (item) => {
              return <li key={item.id}>{item.name}</li>;
            }
          )}
        </div>
      );
    }

    return <div>您未登录！</div>;
  };

  return (
    <div>
      {/* 嵌入函数调用表达式 */}
      {loadData()}
    </div>
  );
}

export default App;

// 另外一种写法，可以看出同学是基于函数的运行理解和对jsx理解写出的很自然的代码

function App () {
  // 渲染条件
  const isLoading = false
  // 模拟数据
  const books2 = [
    {id: 1, name: 'React由浅入深'},
    {id: 2, name: 'Vue由浅入深'},
  ]
  // 条件判断
  if(isLoading){
    return (
      books2.map(item => <li key={item.id}>{item.name}</li>)
    )
  }
  return (
    <div>未登录...</div>
  )
}